<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="./js/sendHttp.js"></script>
	<script type="text/javascript">
	function interfaceTest(){
		//清空输出参数
		document.getElementById("outputPara").innerHTML = "";
		//获取请求方式、请求url、请求参数
		var method = document.getElementById("interfaceMethod").value;
		var url = document.getElementById("interfaceUrl").value;
		var inputData = document.getElementById("inputPara").value;
		//定义出参
		var outputData;

		//判断入参不为空
		if(inputData.replace(/(^\s*)|(\s*$)/g, "") != ""){
			var param = {};
			//发送请求
			try {
				param = JSON.parse(inputData);
			} catch {
				param = { data: inputData };
			}
			sendHttpRequest(method, url, param, function(outputText){
				//获取并显示出参
				outputData = outputText;
				document.getElementById("outputPara").innerHTML = outputData;
			});
		}else{
			alert("请输入参数");
			document.getElementById("inputPara").innerHTML = "";
		}
	}

	function clearText(){
		document.getElementById("inputPara").value = "";
		document.getElementById("outputPara").value = "";
		document.getElementById("inputPara").innerHTML = "";
		document.getElementById("outputPara").innerHTML = "";
	}
	</script>

	<script type="text/javascript">
		var ws;
		function hello(){
			ws = new WebSocket("ws://localhost:8080/atp/websocket");
			ws.onopen = function(evn){
				console.log(evn);
			};
			ws.onmessage = function(evn){
				console.log(evn.data);
				var logArea = document.getElementById("logArea");
				logArea.innerHTML+=evn.data;
			};
			ws.onclose = function(){
				console.log("关闭");
			};

		};

		function subsend(){
			var msg = document.getElementById("msg").value;
			ws.send(msg);
			document.getElementById("msg").value = "";
		}
	</script>

	<title>接口测试</title>
</head>
<body>

<div>
	<h1 style="text-align:center">接口测试页面</h1>
	<table>
		<tr>
			<td>接口名称：<td>
			<td>
				<select id="interfaceUrl" onchange="urlSelect()">
				　　<option value="env/queryEnvironments">查询环境信息接口 env/queryEnvironments</option>
				　　<option value="sys/querySystems">查询系统信息接口 sys/querySystems</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>请求类型：<td>
			<td>
				<select id="interfaceMethod">
					<option value="post">POST请求</option>
					<option value="get">GET请求</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>接口入参：<td>
			<td><textarea id="inputPara" style="width:500px;height:300px"></textarea><td>
		</tr>
	</table>
	
	<input type="button" name="testButton" value="测试" onclick="interfaceTest()"/>
	<input type="button" name="clearButton" value="清空" onclick="clearText()"/>
	
	<div>接口出参：</div>
	<div id="outputPara"></div>

	<div>日志打印：</div>
	<div id="logArea" />
	<input type="button" value="连接" onclick="hello()" />
	<input type="text" id ="msg" /><input type="button" onclick="subsend()" value="发送" />
</div>

</body>
</html>
